<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理</title>
  <script src="./js/jquery.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
    integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.20.2/dist/bootstrap-table.min.css">
  <script src="./js/bootstrap-table.js"></script>
  <script src="./js/bootstrap-table-zh-CN.js"></script>
  </style>
  <style type="text/css">
    .biaoti h3 {
      display: inline-block;
      vertical-align: middle;
    }
  </style>
</head>

<body>
  <div class="biaoti">
    <h3>图书管理</h3>
    <form class="navbar-form navbar-right">
      <button type="button" class="btn btn-default" id="delmul"><span class="glyphicon glyphicon-trash"
          aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;批量删除</button>
      <div class="form-group">
        <input id="search-text" type="text" class="form-control" placeholder="请输入图书ISBN">
        <button type="button" class="btn btn-default" id="search">Search</button>
      </div>
      <button type="button" class="btn btn-default" id="back">返回</button>
      <button type="button" class="btn btn-default" id="add"><span class="glyphicon glyphicon-plus"
          aria-hidden="true"></span>添加图书</button>
    </form>
  </div>
  <!-- 新增图书 -->
  <div class="modal" id="addmodel">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
              class="sr-only">Close</span></button>
          <h4 class="modal-title">新增图书</h4>
        </div>
        <div class="modal-body">
          <iframe id="addFrame" width="100%" margin: auto height="600px" scrolling="no" frameborder=0
            src="./add.html"></iframe>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="submit">保存</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!-- 编辑图书 -->
  <div class="modal" id="mymodal02">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
              class="sr-only">Close</span></button>
          <h4 class="modal-title">编辑图书</h4>
        </div>
        <div class="modal-body">
          <iframe id="editFrame" width="100%" margin: auto height="580px" scrolling="no" frameborder=0
            src="./edit.html"></iframe>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="edit-submit">保存</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!-- 批量删除 -->
  <div class="modal fade" tabindex="-1" role="dialog" id="delcheckmodel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">提示</h4>
        </div>
        <div class="modal-body">
          <p>确认删除选中的项吗</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-default" id="savedelmul">确定</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  <table id="table"></table>
</body>
<script>
  function refresh(data) {
    if (data == undefined) {
      $.ajax({
        url: "http://192.168.96.193:8033/books/loogin",
        success: function (res) {
          $('#table').bootstrapTable("load", res);
        }
      })
    } else {
      $('#table').bootstrapTable("load", data);
    }

  }
  //返回按钮
  $("#back").click(() => {
    $.ajax({
      success: function (res) {
        // $('#search-text').val("");
        refresh();
      }
    })
  })
  function renderTable() {
    $(() => {
      $('#table').bootstrapTable({
        url: "http://192.168.96.193:8033/books/loogin",
        type: "post",
        data: data,
        striped: true, //是否显示行间隔色
        pageNumber: 1, //初始化加载第一页
        pagination: true,//是否分页
        sidePagination: 'client',//server:服务器端分页|client：前端分页
        pageSize: 5,//单页记录数
        pageList: [5, 10],//可选择单页记录数
        columns: [
          {
            checkbox: 'true',
            fixed: 'left',
            align: 'center'
          },
          {
            field: 'bookId',
            title: 'ID'
          }, {
            field: 'bookName',
            title: '书名',
          }, {
            field: 'author',
            title: '作者'
          }, {
            field: 'category',
            title: '类别'
          }
          , {
            field: 'press',
            title: '出版社'
          }
          , {
            field: 'sum',
            title: '图书总数'
          }
          , {
            field: 'sumInw',
            title: '在库总数'
          }
          , {
            field: 'isbn',
            title: 'ISBN'
          }
          , {
            field: 'price',
            title: '价格'
          }
          ,{
            
            field: 'bookUrl',
            title: '图片'
          }
          ,  {
            field: 'operate',
            title: '操作',
            width: '150px',
            align: 'center',
            events: operateEvents,
            formatter: editformatter
          },
        ],
      })
    })
  }
  var data = [{
    //数据存放
  }]
  //新增图书弹窗
  $("#add").click(() => {
    $("#addmodel").modal("toggle");
  })
  //批量删除弹窗
  $("#delmul").click(function () {
    $("#delcheckmodel").modal("toggle");
  });
  //批量删除
  $("#savedelmul").click(() => {
    var selectRows = $("#table").bootstrapTable('getSelections')
    var data
    $.ajax({
      url: "http://192.168.96.193:8033/books/loogin",
      success: function (res) {
        data = res

        for (var i = 0; i < data.length; i++) {
          for (var e = 0; e < selectRows.length; e++) {
            if (data[i].bookId == selectRows[e].bookId) {
              $.ajax({
                url: "http://192.168.96.193:8033/books/del?id=" + data[i].bookId,
                type: "post",
                success: function (res) {
                  refresh();
                }
              })
            }
          }
        }
        $('#delcheckmodel').modal('hide')
      }
    })

  })
  // 添加图书
  $("#submit").click(() => {
    var a = $("#addFrame").contents().find("#showImg").attr("src")
    console.log(typeof a, a)
    $.ajax({
      url: "http://192.168.96.193:8033/books/add",
      type: "post",
      data: {
        "bookName": JSON.stringify($("#addFrame").contents().find("#add-name").val()),
        "author": JSON.stringify($("#addFrame").contents().find("#add-author").val()),
        "category": JSON.stringify($("#addFrame").contents().find("#add-type").val()),
        "press": JSON.stringify($("#addFrame").contents().find("#add-press").val()),
        "sum": $("#addFrame").contents().find("#add-booknum").val(),
        "sumInw": $("#addFrame").contents().find("#add-sum").val(),
        "isbn": JSON.stringify($("#addFrame").contents().find("#add-isbn").val()),
        "price": parseFloat($("#addFrame").contents().find("#add-price").val()),
        "bookUrl": JSON.stringify($("#addFrame").contents().find("#showImg").attr("src")),
      },
      success: function (res) {
        console.log(res)
        $('#addmodel').modal('hide')
        refresh();
      }
    })
  })
  //编辑图书
  $("#edit-submit").click(() => {
    console.log("111")
    $.ajax({
      url: "http://192.168.96.193:8033/books/update",
      type: "post",
      data: {
        "bookId": JSON.stringify($("#editFrame").contents().find("#edit-id").val()),
        "bookName": JSON.stringify($("#editFrame").contents().find("#edit-name").val()),
        "author": JSON.stringify($("#editFrame").contents().find("#edit-author").val()),
        "category": JSON.stringify($("#editFrame").contents().find("#edit-type").val()),
        "press": JSON.stringify($("#editFrame").contents().find("#edit-press").val()),
        "sum": $("#editFrame").contents().find("#edit-booknum").val(),
        "sumInw": $("#editFrame").contents().find("#edit-sum").val(),
        "isbn": JSON.stringify($("#editFrame").contents().find("#edit-isbn").val()),
        "price": parseFloat($("#editFrame").contents().find("#edit-price").val()),
        "bookUrl": JSON.stringify($("#editFrame").contents().find("#showImg").attr("src")),
      },
      success: function (res) {
        console.log(res)
        $('#mymodal02').modal('hide')
        refresh();
      }
    })
  })
  //搜索按钮事件
  $("#search").click(() => {
    console.log("111")
    $.ajax({
      url: "http://192.168.96.193:8033/books/selectbyisbn", //+ "#search-text",
      type: "get",
      data: {
        isbn: $("#search-text").val() 
      },
      success: function (res) {
        $('#search-text').val(""); //清空搜索栏
        console.log(res)
        refresh(res);
      }
    })
  })
  window.operateEvents = {
    // 删除按钮
    "click #deleteTable": function (e, value, row, index) {
      $.ajax({
        url: "http://192.168.96.193:8033/books/del?id=" + row.bookId,
        type: "post",
        success: function (res) {
          refresh();
        }
      })
    },
    // 编辑按钮
    "click #edit": function (e, value, row, index) {
      $("#mymodal02").modal("toggle");
      $("#editFrame").contents().find("#showImg").attr("src",row.bookUrl)
      $("#editFrame").contents().find("#edit-id").attr("value", row.bookId)
      $("#editFrame").contents().find("#edit-name").attr("value", row.bookName)
      $("#editFrame").contents().find("#edit-author").attr("value", row.author)
      $("#editFrame").contents().find("#edit-type").attr("value", row.category)
      $("#editFrame").contents().find("#edit-press").attr("value", row.press)
      $("#editFrame").contents().find("#edit-booknum").attr("value", row.sum)
      $("#editFrame").contents().find("#edit-sum").attr("value", row.sumInw)
      $("#editFrame").contents().find("#edit-isbn").attr("value", row.isbn)
      $("#editFrame").contents().find("#edit-price").attr("value", row.price)
    },
    "click #search": function (e, value, row, index) {

    },
  }

  function editformatter(value, row, index) {
    return [
      ' <button type="button" id="edit"><span aria-hidden="true"></span>编辑</button>',
      '<button  type="button" id="deleteTable"><span aria-hidden="true"></span>删除</button>',
    ].join('');
  }
  // 页面初始化渲染表格
  renderTable();
</script>

</html>